import React, {PureComponent} from "react";
import {Button, DatePicker, Form, Icon, Input, Search, Select} from "antd";

import "./EditCarStyle.css";
import {queryDistCar} from "../common/ApiUtils";

/**
 * 编辑车辆
 */
class EditCarComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            carMessage: props.carMessage,
        }
    }

    render() {

        console.log("车辆编辑 信息");
        console.log(this.state.carMessage);

        const {carMessage} = this.state;

        const {getFieldDecorator} = this.props.form;

        // 设置form 的样式

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 16},
                sm: {span: 16},
            },
        };

        //设置单个item的样式
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 12,
                },
            },
        };


        return (
            <Form
                {...formItemLayout}
                className={"editForm"}
                onSubmit={() => {
                    console.log("点击了提交");
                }}
            >
                <Form.Item
                    label={"部门"}
                >
                    {
                        getFieldDecorator(
                            '部门', {
                                rules: [{required: true, message: '请选择部门',}],
                                initialValue: carMessage.deptName
                            },
                        )(
                            <Select
                                size={"default"}
                                maxTagCount={1}
                                showArrow={true}
                            >
                                <Select.Option value={"测试部门1"}>测试部门1</Select.Option>
                                <Select.Option value={"测试部门2"}>测试部门2</Select.Option>
                                <Select.Option value={"测试部门3"}>测试部门3</Select.Option>
                            </Select>)
                    }


                </Form.Item>


                <Form.Item
                    label={"车牌号"}
                >
                    <Input
                        placeholder={"请输入车牌号"}
                        defaultValue={carMessage.plateNumber ? carMessage.plateNumber : null}/>
                </Form.Item>


                <Form.Item
                    label={"车辆信息"}

                >
                    <Input
                        placeholder={"请输入车辆信息"}
                        defaultValue={carMessage.description ? carMessage.description : null}/>
                </Form.Item>

                <Form.Item
                    label={"是否外包"}
                >
                    <Select defaultValue={carMessage.isOutsource}>
                        <Select.Option value={'是'}>是</Select.Option>
                        <Select.Option value={"否"}>否</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label={"电压容量"}
                >

                    {
                        getFieldDecorator(
                            'text', {
                                rules: [{required: true, message: '请输入电压容量',}],
                                initialValue: "36V"
                            }
                        )(
                            <Select>
                                <Select.Option value={'24V'}>24V</Select.Option>
                                <Select.Option value={"36V"}>36V</Select.Option>
                                <Select.Option value={"48V"}>48V</Select.Option>
                                <Select.Option value={"72V"}>72V</Select.Option>
                            </Select>
                        )
                    }


                </Form.Item>

                <Form.Item
                    label={"电流容量"}
                >

                    {
                        getFieldDecorator(
                            'text', {
                                rules: [{required: true, message: '请输入电流容量',}],
                                initialValue: "10AH"
                            }
                        )(
                            <Select initialValue={"10AH"}>
                                <Select.Option value={'4AH'}>4AH</Select.Option>
                                <Select.Option value={'6AH'}>6AH</Select.Option>
                                <Select.Option value={'8AH'}>8AH</Select.Option>
                                <Select.Option value={'10AH'}>10AH</Select.Option>
                                <Select.Option value={'12AH'}>12AH</Select.Option>
                            </Select>
                        )

                    }


                </Form.Item>

                <Form.Item
                    label={"终端编号"}
                >

                    {
                        getFieldDecorator(
                            '终端编号', {
                                rules: [{required: true, message: '请输入终端编号',}],
                                initialValue: carMessage.tagSerial

                            })(<Input placeholder={"请输入终端编号"} disabled={true}/>)

                    }

                </Form.Item>

                <Form.Item
                    label={"购置日期"}
                >
                    <DatePicker/>
                </Form.Item>

                <Form.Item
                    label={"使用日期"}
                >
                    <DatePicker/>
                </Form.Item>

                <Form.Item
                    label={"温度上限"}
                >

                    <Input addonAfter="℃" defaultValue="75"/>
                </Form.Item>

                <Form.Item
                    label={"冗余时间"}
                >
                    <Input addonAfter="分钟" defaultValue="10"/>
                </Form.Item>

                <Form.Item
                    label={"描述"}
                >
                    <Input.TextArea rows={3}/>
                </Form.Item>


                <Form.Item
                >
                    <Button type="primary" htmlType="submit">确定</Button>
                    <Button htmlType={"button"}>取消</Button>
                </Form.Item>

            </Form>
        )
    }

    componentDidMount() {
        queryDistCar(this.props.carMessage.id)
            .then((res) => {
                console.log("获取车辆信息");
                console.log(res);
                console.log(res.data);
            })
            .catch((error) => {
                console.log("获取车辆信息出现错误");
                console.log(error);
            })
    }

}

const EditCarWrapperComponent = Form.create({name: "EditCar"})(EditCarComponent);

export default EditCarWrapperComponent;